<template>
  <!-- 发布需求 -->
  <div>
    <div class="issue-box">
      <!-- 需求发布：标题 -->
      <div class="issue-title">
        <span class="issus-firstext">需求发布</span>
        <span class="issus-firstsecond secondTop"
          >驻场无忧拥有
          <span class="issus-firsthree">978137</span>
          互联网人才，
        </span>
        <span class="issus-firstsecond"
          >成功完成了
          <span class="issus-firsthree">36678</span>
          项目，请放心发布您的需求!
        </span>
      </div>
      <!-- 请点击卡片选择您的需求类型～ -->
      <div class="issue-three" v-show="isExhibition">
        <div class="issue-smallbox">
          <span class="issue-text">请点击卡片选择您的需求类型～</span>
        </div>
        <div class="issue-list">
          <div
            v-for="(item, index) in issueList"
            :key="index"
            class="issue-item"
            :style="issueBackImage(item)"
            @click="goPage(item, index)"
          ></div>
        </div>
      </div>
      <!-- 三个组件 -->
      <div v-if="choseIssue==0"><IssueCloud></IssueCloud></div>
      <div v-if="choseIssue==1"><IssueSite></IssueSite></div>

      <div v-if="choseIssue==2"><IssuePack></IssuePack></div>
      <!-- ------ -->
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// 云端工作
import IssueCloud from "../issue/IssueCloud.vue";
// 、驻场开发
import IssuePack from "../issue/IssuePack.vue";
// 、项目整包
import IssueSite from "../issue/IssueSite.vue";
import { site, clouds, packages } from "@/config/userFileImg.js";
const router = useRouter();
const isExhibition = ref(true); //默认显示
const choseIssue=ref(null)
const issueList = ref([
  { name: "云端工作", background: clouds },
  { name: "驻场开发", background: site },
  { name: "项目整包0", background: packages },
]);
// 绑定背景照片
const issueBackImage = (item) => {
  return {
    "background-image": `url(${item.background})`,
  };
};
// 去跳转
const goPage = (item, index) => {
  choseIssue.value=index
  // console.log(item, index);
  isExhibition.value = false;
  let pathUrl = "";
  if (index === 1) {
    pathUrl = "/index/issue/IssueSite.vue";
  } else if (index === 2) {
    pathUrl = "/index/issue/IssuePack.vue";
  } else {
    pathUrl = "/index/issue/IssueCloud.vue";
  }
  // router.push(pathUrl);
};
</script>
  <style>
.issue-box {
  min-height: 886px;
  background: rgba(255, 255, 255, 0.68);
  background-size: cover;
  background-image: url("@/assets/issue-brckground.png");
  display: flex;
  flex-direction: column;
  align-items: center;
}
.issue-title {
  margin-top: 166px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: PingFang SC, PingFang SC;
  font-style: normal;
  text-transform: none;
}
.issus-firstext {
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  margin-bottom: 22px;
}
.issus-firstsecond {
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}
.secondTop {
  margin-bottom: 9px;
}
.issus-firsthree {
  font-weight: 600;
  font-size: 24px;
  color: #165dff;
}
.issue-three {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.issue-smallbox {
  margin-top: 43px;
  width: 336px;
  height: 14px;
  background: #fcc500;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  padding: 0 3px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  position: relative;
}
.issue-text {
  position: absolute;
  top: -20px;
}
.issue-list {
  display: flex;
  align-items: center;
  gap: 24px;
}
.issue-item {
  width: 406px;
  height: 348px;
  background-size: cover;
  /* background: aqua; */
}
</style>

